<template>
	<view class="page">
		<!-- tab -->
		<view class="tab box dis-flex flex-x-center flex-y-center">
			<view class="flex-box f_26 dis-flex flex-y-center flex-dir-column" @click="toggle(1)">
				<view>曾授课</view>
				<view :class="tabindex==1?'border-bottom':''"></view>
			</view>
			<view class="flex-box f_26 dis-flex flex-y-center flex-dir-column" @click="toggle(2)">
				<view>我的收藏</view>
				<view :class="tabindex==2?'border-bottom':''"></view>
			</view>
		</view>
		<course-list :selectList="selectList" :lat="latitude" :lon="longitude" :listType="3" @bind-index="delTeacher" @bind-view="toTeacherDetail" ></course-list>
		<load-more :status="loadingStatus" defaultIcon="1" text="暂无名片"></load-more>
	</view>
</template>

<script>
const app = getApp();
import { getLocation } from '@/static/uitls/getLocation.js'; // 获取经纬度
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import courseList from '@/components/course-list/index.vue'; // 课程列表
import API from '@/static/api/index.js'
import loadMore from '@/components/loadmore/index.vue';
import { setCourseFormat } from '@/static/uitls/changeData.js';
	export default {
		components: {
			courseList,
			loadMore
		},
		name:'index',
		mixins: [commonMixinFun],
		onShow(){
			this._getLocation();
			this.getUserCollectCard();
		},
		data() {
			return {
				latitude:'',
				longitude:'',
				tabindex:1,
				page:1,
				size:10,
				tools:'',
				loadingStatus: 'loading',
				isRequest:false,
				selectList: [],
			};
		},
		methods:{
			// 获取用户位置信息
			_getLocation() {
				this.showLoading('加载中');
				let _this = this;
				getLocation(
					function(res) {
						let { code, latitude, longitude } = res;
						if (code) {
						} else {
							app._log(latitude,longitude)
							_this.latitude = latitude;
							_this.longitude = longitude;
						}
						app._log(res);
					},false,true,_this);
			},
			getUserCollectCard(){
				app._log(123)
				let {tabindex,page,size,tools,isRequest,selectList}=this;
				if(!isRequest&&(selectList.length<tools||selectList.length==0)){
					this.loadingStatus = 'loading';
					this.isRequest=true;
					API.userCollectCard({page:page,size:size,type:tabindex}).then(res=>{
						app._log(res);
						let { code, data } = res;
						if (code == 1) {
							app._log(data)
							let list = page == 1 ? setCourseFormat(data.teacher_course) : selectList.concat(setCourseFormat(data.teacher_course));
							this.selectList = list;
							this.tools = data.total;
							// app._log('订单数量', list.length, data.total);
							this.loadingStatus = data.total==0?'empty':list.length >= data.total ? 'nomore' : 'getmore';
							this.page+=1
						} else {
							this.loadingStatus = code == 405 ? (page == 1 ? 'empty' : 'nomore') : 'error';
							if (page == 1) {
								this.selectList = [];
								this.tools = 0;
							}
						}
						this.isRequest=false;
					}).catch(err=>{
						this.isRequest=false;
						this.loadingStatus = 'error';
					})
				}
			},
			delTeacher(index){
				uni.showModal({
				    title: '删除提醒',
				    content: '删除名片后不可恢复，是否删除？',
					confirmText:'删除',
					confirmColor:'#333333',
				    success:res=>{
				        if (res.confirm) {
							API.userDeleteCollectCard(this.selectList[index].teacher_course_id).then(res=>{
								if(res.code==1){
								   this.showToast('删除成功','success')
								   this.toggle(this.tabindex)
								}else{
								   this.showToast('请稍后再试')
								}
							})
				        }
				    }
				});
			},
			toTeacherDetail(index){
				this.pageTo('/pages/teacher_detail/index',{id:this.selectList[index].teacher_course_id})
			},
			toggle(index){
				this.tabindex=index
				this.page=1;
				this.isRequest=false;
				this.selectList = [];
				this.getUserCollectCard()
			}
		},
		onReachBottom(){
			this.getUserCollectCard()
		}
	}
</script>

<style scoped lang="scss">
.tab{
	height: 92rpx;
	.border-bottom{
		width: 24rpx;
		height: 4rpx;
		background-image: linear-gradient(180deg, 
			#7f4aff 0%, 
			#a977ff 100%);
		border-radius: 4rpx;
		margin-top: 4rpx;
	}
	.border-white{
		width: 24rpx;
		height: 4rpx;
		background:white;
		border-radius: 4rpx;
		margin-top: 4rpx;
	}
}
// .list-box{
// 		.f-c-ff6f03{
// 			color: #ff6f03;
// 		}
// 		.item{
// 			margin: 16rpx 48rpx;
// 			background-color: white;
// 			box-shadow: 0rpx 0rpx 32rpx 0rpx 
// 				rgba(37, 39, 72, 0.03);
// 			border-radius: 32rpx;
// 			padding: 0 32rpx;
// 		}
// 		.name{
// 			padding: 32rpx 0 24rpx 0 ;
// 			image{
// 				width: 40rpx;
// 				height: 40rpx;
// 			}
// 		}
// 		.type{
// 			color: white;
// 			padding: 4rpx 8rpx;
// 			background-color: #ffa748;
// 			border-radius: 2rpx 8rpx 2rpx 8rpx;
// 			margin-right: 24rpx;
// 		}
// 		.age{
// 			padding: 4rpx 8rpx;
// 			background-color:rgba(127,74,255,0.1);
// 			border-radius: 2rpx 8rpx 2rpx 8rpx;
// 			color: #7f4aff;
// 			margin-right: 24rpx;
// 		}
// 		.tag{
// 			color: rgba(37, 39, 72, 0.8);
// 			margin-right: 24rpx;
// 			padding: 4rpx 8rpx;
// 			background-color: rgba(209,210,219,0.2);
// 		}
// 		.teacher-info{
// 			padding: 32rpx 0 24rpx 0;
// 			.image-box{
// 				width: 64rpx;
// 				height: 64rpx;
// 				border-radius: 32rpx;
				
// 			}
// 		}
// }
</style>
